<template>
    <div class="container">
      <div style="height: 20px;"></div>
      <div style="width: 95%;margin-left: 2.5%;background: #ffffff;border-radius: 10px;">
        <div style="height: 20px;"></div>
        <div @click="addMain" style="color: #000000;width: 90%;margin-left: 5%;display: flex;align-items: center;justify-content: space-between;">
            <div>新增巡检点位</div>
            <div class="addBtn">新增</div>
        </div>
        <div style="height: 20px;"></div>
      </div>
      <div style="height: 10px;"></div>
      <!-- 内容切换 -->
      <div v-if="list.length == 0">
        <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
        </u-empty>
      </div>
      <div class="card" v-for="item in list" @click="taskDetail(item)">
        <div style="height: 10px"></div>
        <div class="card-top">
          <div style=" text-align: center;font-size: 18px;font-weight: 500;">{{ item.repairMaintainNo ?? item.inspectNo ?? item.safetyTrainNo }}</div>
        </div>
        <div style="height: 10px"></div>
        <u-line color="#83AF92"></u-line>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>开始时间</div>
          <div>{{ item.dateBegin }}</div>
        </div>
        <div style="height: 10px"></div>
        <div class="newFlex">
          <div>结束时间</div>
          <div>{{ item.dateEnd }}</div>
        </div>
        <div style="height: 10px;"></div>
        <div class="newFlex">
          <div>生产部门</div>
          <div>{{ item.deptName}}</div>
        </div>
        <div style="height: 10px;"></div>
        <div class="newFlex">
          <div>间隔</div>
          <div>{{ item.inspectInterval }}</div>
        </div>
        <div style="height: 10px;"></div>
        <div class="newFlex">
          <div>巡检要求</div>
          <div>{{ item.inspectRequirement }}</div>
        </div>
        <div style="height: 10px;"></div>
        <div class="newFlex">
          <div>巡检对象</div>
          <div>{{ item.inspectName }}</div>
        </div>
        <div style="height: 15px;"></div>
      </div>
      <div style="height: 3vh;"></div>
    </div>
  </template>
  <script>
  import { insList } from '../api/api.js';
  export default {
    data() {
      return {
        date: '',
        dates: '',
        indent: '',
        startTime: '',
        endTime: '',
        list: [],
        remark: ''
      };
    },
    methods: {
      //新增
      addMain(){
        uni.navigateTo({ url: `/pagesPlant/index/addInspect` })
      },
      bindDateChange: function (e) {
        //选择日期
        this.date = e.detail.value;
        console.log("date", this.date);
          this.xList();
      },
      bindDateChanges: function (e) {
        //选择日期
        this.dates = e.detail.value;
        this.xList();
      },
      getDate(type) {
        //年月日
        const date = new Date();
        // const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
  
        if (type === "start") {
          year = year - 60;
        } else if (type === "end") {
          year = year + 2;
        }
        month = month > 9 ? month : "0" + month;
        day = day > 9 ? day : "0" + day;
        return `${year}-${month}-${day}`;
      },
      taskDetail(item) {
        let info = JSON.stringify(item)
        uni.navigateTo({ url: `/pagesPlant/index/addInspect?info=${info}` })
      },
      xList() {
        insList({
          workOrderState: 2,
          beginTime: this.date,
          endTime: this.dates,
          type: 1
        }).then(res => {
          console.log(res.data, '巡检工单');
          this.list = res.data.data;
        })
      },
    },
    onLoad() { },
    onShow() {
      this.indent = uni.getStorageSync('pageIndent');
      this.remark = uni.getStorageSync('userInfo').remark;
      this.xList();
    }
  };
  </script>
  <style lang="scss">
  .container {
    height: 100vh;
    width: 100vw;
    background: #f3f3f3;
    color: #000000;
    overflow-y: scroll;
  }
  .newFlex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
  .card {
    width: 95%;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 10px;
    background: #ffffff;
  
    .card-top {
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 90%;
      margin-left: 5%;
    }
  }
  
  .items {
    display: flex;
    align-items: center;
    width: 90%;
    margin-left: 5%;
    justify-content: space-between;
    font-size: 14px;
  }
  
  .table {
    width: 90%;
    margin-left: 5%;
  }
  
  .status {
    color: #fff;
    background: #000000;
    width: 90%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    border-radius: 3px;
  }
  
  .status1 {
    color: #000000;
    background: gray;
    width: 90%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    border-radius: 3px;
  }
  
  .right {
    background: #FDBD18;
    color: #fff;
  
  }
  
  .right1 {
    background: #50AB18;
    color: #fff;
  }
  
  .head {
    display: flex;
    align-items: center;
    height: 50px;
    background: #000000;
    color: #fff;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 9999;
  }
  
  .btn {
    display: flex;
    align-items: center;
    background: #1B9C46;
    color: #fff;
    border-radius: 7px;
    height: 75rpx;
    justify-content: center;
    position: absolute;
    width: 100px;
    z-index: 9999;
    bottom: 10%;
    right: 10px;
    font-size: 17px;
  }
  
  .btnRound {
    width: 90%;
    margin-left: 5%;
    display: flex;
    justify-content: space-between;
  }
  .addBtn{
    width: 120rpx;
    height: 65rpx;
    background-color: #000000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
  }
  </style>